<template>
  <div class="statistics-article">
    <svg class="icon backicon" aria-hidden="true">
      <use xlink:href="#icon-wenzhang1"></use>
    </svg>

    <div style="width: 100%;height:60%;display: flex;flex-direction: row;justify-content: center;align-items: center;">
      <div style="width: 35%;height: 100%;display: flex;justify-content: center;align-items: center;">
        <svg class="icon" aria-hidden="true"
             style="width: 60px;height: 60px;">
          <use xlink:href="#icon-wenzhang1"></use>
        </svg>
      </div>

      <div style="width: 60%;height: 100%;
                display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
        <div style="display: flex;flex-direction: row;justify-content:center;align-items: baseline;">
          <countTo style="font-size:40px;font-weight:bold;"
                   :startVal='0' :endVal='statistics.article.articleCount' :duration='2000'></countTo>
          <span style="font-size:15px;font-weight:700;">/ b</span>
        </div>
        <div style="display: flex;flex-direction: row;align-items: baseline;">
          <span style="font-size:14px;">Words∶</span>
          <countTo style="font-size:14px;font-weight:bold;"
                   :startVal='0' :endVal='statistics.article.words' :duration='2000'></countTo>
        </div>
      </div>
    </div>

    <div class="statis-divider" style="border-top: 2px solid;width: 90%;"></div>

    <div style="width: 80%;height:40%;
              display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
      <div style="display: flex;flex-direction: row;justify-content:center;align-items: baseline;">
        <i class="iconfont icon-hits5"/>
        <span style="font-size: 16px;margin-left: 10px;">Hits∶</span>
        <countTo style="font-size:13px;"
                 :startVal='0' :endVal='statistics.article.hits' :duration='3000'></countTo>
      </div>
      <div style="display: flex;flex-direction: row;justify-content:center;align-items: baseline;">
        <i class="iconfont icon-read2"/>
        <span style="font-size: 16px;margin-left: 10px;">Views∶</span>
        <countTo style="font-size:13px;"
                 :startVal='0' :endVal='statistics.article.pViews' :duration='3000'></countTo>
      </div>
    </div>
  </div>
</template>

<script>

  import {getDraftStatistics} from "../api/article"
  import countTo from 'vue-count-to'

  export default {
    name: "statisticeArticle",
    data () {
      return {
        statistics: {
          article: {
            articleCount : 0,
            words        : 0,
            hits         : 0,
            pViews       : 0
          }
        }
      }
    },
    computed: {
      isLogin  () {return this.$store.state.config.login.loginState === this.$GLOBAL.LOGIN.STATE.SUCCESS},
    },
    methods: {
      findStatis () {
        getDraftStatistics().then(resp => {
          this.statistics.article.articleCount = resp.data.articleCount
          this.statistics.article.words        = resp.data.words
          this.statistics.article.hits         = resp.data.hits
          this.statistics.article.pViews       = resp.data.pViews
        })
      },
    },
    mounted() {
      if (this.isLogin) {
        this.findStatis()
      }
    },
    components: {
      countTo
    }
  }
</script>

<style scoped lang="scss">

  .statistics-article {
    @include flex(column,space-around,center);
    @include boxBase(100%,50%);
    z-index: 999;
    font-family: Lato,sans-serif;
    position: relative;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 10px 10px 50px 10px;
    transition: box-shadow 0.5s,width 0.2s;
    [data-theme="light"] & {
      background-color: #343434;
    }
    [data-theme="night"] & {
      background-color: #343434;
    }

    .backicon {
      @include boxBase(150px,150px);
      position: absolute;
      left: -30px;
      top: -15px;
      color:  rgba(255,255,255,0.1);
      transition: left 0.2s;
    }

    &:hover {
      width: 150%;
      .backicon {
        left: -40px;
      }
    }
  }
</style>
